<template>
	<view class="expand">
		<cu-custom :isBack="true" textWeight='600' textSize='16' fhColor="#000" textColor="#333"
			:boxShadow="!navTitleEjShow" :imgBj="!navTitleEjShow?imgURL+'topbac.png':''"
			:xbgColor="navTitleEjShow?'#fff':''">
		</cu-custom>
		<view class="titleTop" :class="{titleTopYs:navTitleEjShow}"
			:style="[{height:CustomBar + 'px',paddingTop:StatusBar+'px'}]" v-if="navTitleEj">
			<view class="clk" @click="titleShow">{{navTitleEj[navTitleEjIndex].categoryName}}
				<image :class="{imgYs:navTitleEjShow}" :src="imgURL+'DropArrow_Icon.png'" mode=""></image>
			</view>
		</view>
		<!-- 二级标题 -->
		<view class="navTitleEjBox" v-if="navTitleEjShow" @click="navTitleEjShow=false">
			<view class="tmbj"></view>
			<view class="navTitleEj" @click.stop="">
				<view class="list" v-for="(item,index) in navTitleEj" :key='index' @click.stop="boxClick(item,index)">
					<view class="text" :class="{textYs:navTitleEjIndex == index}">{{item.categoryName}}</view>
				</view>
			</view>
		</view>
		<view class="content"> 
			<scroll-view scroll-x="true" class="tabBar" v-if="navTitleEj" :style="{top:CustomBar+'px'}">
				<view class="tab" :class="goodsCategoryId===navTitleEj[navTitleEjIndex].id?'active':''"
					@click="checkoutShow(navTitleEj[navTitleEjIndex].id,2)">
					<image class="img" :src="navTitleEj[navTitleEjIndex].categoryImgUrl" mode=""></image>
					<text class="text">全部</text>
				</view>
				<view class="tab" :class="i.id===goodsCategoryId?'active':''"
					v-for="(i,n) in navTitleEj[navTitleEjIndex].goodsLabelVos" :key="n" @click="checkoutShow(i.id,3)">
					<image class="img" :src="i.categoryImgUrl" mode=""></image>
					<text class="text">{{i.categoryName}}</text>
				</view>
			</scroll-view>
			<view class="commodity" :style="{top:CustomBar+'px'}">
				<view class="headline">精选商品</view>
				<view class="choices">
					<view class="choicesed" :class="sort===0?'active':''" @click="sortClick(0)">默认</view>
					<view class="choicesed" :class="sort===1?'active':''" @click="sortClick(1)">销量</view>
					<view class="choicesed" :class="sort===2?'active':''" @click="sortClick(2)">价格
						<view class="icon">
							<image :src="imgURL+'price.png'" mode="heightFix" v-if="sort!==2"></image>
							<image :src="imgURL+'pricedown.png'" mode="heightFix" v-if="sort===2&&orderBy==='asc'">
							</image>
							<image :src="imgURL+'priceup.png'" mode="heightFix" v-if="sort===2&&orderBy==='desc'">
							</image>
						</view>
					</view>
					<view class="line"></view>
					<view class="filtrate">筛选
						<view class="icon">
							<image :src="imgURL+'filter.png'" mode="heightFix"></image>
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="commodityBox" :style="{height:heighta-CustomBar+'px'}"
				@scrolltolower="scroll">
				<view class="scrollY" v-if="list.length>0">
					<view class="list">
						<shopping-list v-for="(item,index) in list" :key="index" :listItem="item"></shopping-list>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import shoppingList from '@/components/shopping/shoppingList.vue'
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				imgURL: this.$http.imgUrl + '/static/classification/',
				// imgUrl: this.$http.imgUrl + '/static/',
				heighta: '',
				// 二级标题
				navTitleEj: '',

				navTitleEjIndex: 0,
				navTitleEjShow: false,
				sort: 0,

				// navbar数据
				parent: '',
				navbar: '',
				//商品列表
				list: '',
				pageNumber: 1,
				total: '',
				// 请求所需数据
				field: '', //	排序字段: 价格-goods_price 销量-goods_sales	query	false
				goodsCategoryId: '', //	商品分类id	query	false	
				highPrice: '', //	最高价	query	false	
				keyWords: '', //	关键词	query	false	
				lowerPrice: '', //	最低价	query	false	
				orderBy: 'asc', //	排序： desc-倒序 asc-正序	query	false	
				categoryLevel: 3, //  分类等级
			}
		},
		components: {
			shoppingList
		},
		onLoad({
			id,
			parenId,
			index
		}) {
			this.navTitleEjIndex = index
			this.goodsCategoryId = +id
			this.parent = parenId
			this.getNavbar()
			this.getData()
		},
		mounted() {
			this.heighta = uni.getSystemInfoSync().windowHeight
		},
		methods: {
			// 标题点击
			titleShow() {
				this.navTitleEjShow = !this.navTitleEjShow
			},
			// 顶部下拉选项点击
			boxClick(item, index) {
				this.navTitleEjIndex = index
				this.navTitleEjShow = false
				this.goodsCategoryId = this.navTitleEj[index].id
				this.init()
				this.getData()
			},
			// 获取navbar数据
			async getNavbar() {
				const url = this.api.classify.secondThirdLabel
				const {
					data
				} = await this.$http.get(url, {
					parentId: this.parent
				})
				this.navTitleEj = data.data
				// console.log(this.navTitleEj, 'this.navbar');
			},
			// 获取列表数据
			async getData() {
				const url = this.api.expand.search
				const {
					data
				} = await this.$http.get(url, {
					// token:uni.setStorageSync('token'),
					field: this.field, //	排序字段: 价格-goods_price 销量-goods_sales	query	false	
					goodsCategoryId: this.goodsCategoryId, //	商品分类id	query	false	
					highPrice: this.highPrice, //	最高价	query	false	
					keyWords: this.keyWords, //	关键词	query	false	
					lowerPrice: this.lowerPrice, //	最低价	query	false	
					orderBy: this.orderBy, //	排序： desc-倒序 asc-正序	query	false	
					pageNumber: this.pageNumber, //	查询页码,默认值为1	query	false	
					pageSize: 15, //	查询页大小,默认值为10	query	false	
					categoryLevel: this.categoryLevel,
					token: uni.getStorageSync('token')
				})
				// console.log(data,'getdata');
				if (this.pageNumber === 1) {
					this.list = data.data.data
				} else {
					this.list.push(...data.data.data)
				}
				// console.log(this.list);
				this.total = data.data.totalCount
			},
			// 点击切换tabBar
			checkoutShow(n, i) {
				this.categoryLevel = i
				this.goodsCategoryId = n
				this.init()
				this.getData()
			},
			// 点击切换排序方式
			sortClick(i) {
				if (this.sort === i && i === 0) return
				this.list = ''
				this.pageNumber = 1
				this.total = ''
				this.highPrice = '' //	最高价	query	false
				this.keyWords = '' //	关键词	query	false	
				this.lowerPrice = '' //	最低价	query	false
				if (i === 0) {
					this.sort = i
					this.orderBy = 'desc'
					this.field = '' //	排序字段: 价格-goods_price 销量-goods_sales	query	false
				} else if (i === 1) {
					if (this.sort === i && this.orderBy === 'asc') {
						this.orderBy = 'desc' //	排序： desc-倒序 asc-正序	query	false
					} else if (this.sort === i && this.orderBy === 'desc') {
						this.orderBy = 'asc'
					} else {
						this.field = 'goods_sales' //	排序字段: 价格-goods_price 销量-goods_sales	query	false
						this.sort = i
					}
				} else if (i === 2) {
					if (this.sort === i && this.orderBy === 'asc') {
						this.orderBy = 'desc' //	排序： desc-倒序 asc-正序	query	false
					} else if (this.sort === i && this.orderBy === 'desc') {
						this.orderBy = 'asc'
					} else {
						this.field = 'goods_price' //	排序字段: 价格-goods_price 销量-goods_sales	query	false
						this.sort = i
					}
				}
				this.getData()
			},
			// 滑动scroll
			scroll() {
				if (this.total === 0 || this.total === this.list.length) return
				this.pageNumber++
				this.getData()
			},
			// 初始化
			init() {
				this.list = ''
				this.pageNumber = 1
				this.total = ''
				this.highPrice = '' //	最高价	query	false
				this.keyWords = '' //	关键词	query	false	
				this.lowerPrice = '' //	最低价	query	false
				this.field = this.field
				this.orderBy = 'asc'
			},
			// 去商品详情页
			toshopDetails(item) {
				// console.log(item);
				uni.navigateTo({
					url: '/pagesA/HomePage/ShopDetails?id=' + item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navTitleEjBox {
		position: fixed;
		width: 100%;
		z-index: 2;
		height: 100%;

		.tmbj {
			background-color: #000;
			opacity: .4;
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.navTitleEj {
			position: absolute;
			background-color: #FFFFFF;
			width: 100%;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 56rpx;

			.list {
				width: 33.33%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 56rpx;

				.text {
					min-width: 132rpx;
					height: 44rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					text-align: center;
					padding: 0 24rpx;
					line-height: 44rpx;
				}

				.textYs {
					background: rgba(77, 139, 255, 0.2);
					font-size: 28rpx;
					font-weight: 500;
					color: #4D8BFF;
					border-radius: 22rpx;
				}
			}
		}
	}

	.expand {
		.titleTop {
			position: fixed;
			top: 0%;
			left: 0%;
			z-index: 99999;
			left: 50%;
			transform: translateX(-50%);
			width: 500rpx;
			// background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/classification/topbac.png) no-repeat;
			// background-size: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.clk {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}

				.imgYs {
					transform: rotate(180deg);
				}
			}
		}

		.titleTopYs {
			box-shadow: initial;
		}

		.content {
			width: 100%;
			font-size: 0;

			.tabBar {
				height: 170rpx;
				// width: 140rpx;
				padding: 32rpx 24rpx 0;
				width: 100%;
				white-space: nowrap;
				position: fixed;
				width: 100%;
				left: 0;
				background-color: #f4f4f4;

				.tab {
					height: 140rpx;
					width: 140rpx;
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.text {
						margin-top: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}

					&.active {
						background-color: #FFFFFF;
						border-radius: 50% 50% 0 0;
						box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(153, 153, 153, 0.12);
						z-index: 1;
						font-size: 0;

						.text {
							font-weight: 600;
							color: #4D8BFF;
						}
					}
				}
			}

			.commodity {
				width: 100%;
				background-color: #FFFFFF;
				// padding: 0 24rpx;
				overflow: hidden;
				position: fixed;
				width: 100%;
				margin-top: 169rpx;
				height: 150rpx;
				border-radius: 12rpx 12rpx 0 0;
				z-index: 1;

				.headline {
					border-radius: 12rpx 12rpx 0 0;
					// margin-top: -2rpx;
					padding: 0 24rpx;
					padding-top: 28rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				.choices {
					padding: 0 24rpx;
					height: 88rpx;
					// padding-top: 24rpx;
					display: flex;
					text-align: center;
					align-items: center;
					font-size: 28rpx;

					.choicesed {
						flex: 1;
						display: flex;
						justify-content: center;

						.icon {
							margin-left: 8rpx;
							height: 38rpx;
							display: flex;
							align-items: center;

							image {
								height: 24rpx;
								width: 16rpx;
							}
						}

						&.active {
							font-weight: 500;
							color: #4D8BFF;
						}
					}

					.line {
						width: 2rpx;
						height: 32rpx;
						background-color: #ccc;
					}

					.filtrate {
						width: 128rpx;
						display: flex;
						justify-content: center;

						.icon {
							margin-left: 8rpx;
							height: 38rpx;
							display: flex;
							align-items: center;

							image {
								height: 24rpx;
							}
						}
					}
				}
			}

			.commodityBox {
				padding-top: 312rpx;
				// background-color: #fff;

				.scrollY {
					background-color: #fff;
					padding: 10rpx 24rpx;

					.list {
						width: 702rpx;
						// margin: 32rpx 24rpx 0 24rpx;
						margin-bottom: 24rpx;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;


					}
				}
			}
		}
	}
</style>